<template>
  <v-layout>
    <div style="width: 100%; background-color: rgb(239, 239, 239); padding: 10px">
      <v-table fixed-header height="74vh">
        <thead>
          <tr>
            <th v-for="title in practiceTitle" :key="title" style="font-size: small">
              {{ title }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in results" :key="item.name" style="font-size: small">
            <td>{{ item.teamName }}</td>
            <td>{{ item.teamMembers }}</td>
            <td>{{ item.topic }}</td>
            <td>{{ item.time }}</td>
          </tr>
          <tr v-if="changeInfo">
            <td><v-text-field v-model="data.teamName" variant="underlined" placeholder="团队名称"></v-text-field></td>
            <td><v-text-field v-model="data.teamMembers" variant="underlined" placeholder="团队成员"></v-text-field></td>
            <td><v-text-field v-model="data.topic" variant="underlined" placeholder="实践课题"></v-text-field></td>
            <td><v-text-field v-model="data.time" variant="underlined" placeholder="实践时间"></v-text-field></td>
          </tr>
        </tbody>
        <template v-slot:bottom>
          <div style="display: flex; padding-bottom: 0.5%; padding-left: 1%">
            <v-btn @click="() => {
              changeInfo = !changeInfo
              if (!changeInfo) {
                clear()
              }
            }
              ">
              <span v-if="changeInfo">取消</span>
              <span v-if="!changeInfo">添加</span>
            </v-btn>
            <v-btn v-if="changeInfo" class="btn" density="compact" color="light-blue-accent-3" height="35px"
              @click="addAudit()">
              提交
            </v-btn>
          </div>
        </template>
      </v-table>
    </div>
  </v-layout>
</template>
<script lang="ts" setup>
import { AddAudit, GetApplication } from '@/controllers/auditController';
import { message, messageConfirm } from '@/utils/message'
import { ref, reactive, onMounted } from 'vue'
let changeInfo = ref(false)
let practiceTitle = ['团队名称', '社会实践成员', '实践课题', '实践时间',]
let data = reactive({
  teamName: '',
  teamMembers: '',
  topic: '',
  time: '',
})
let results = ref([
] as any[])
onMounted(async () => {
  try {
    const res = await GetApplication()
    res.forEach((val) => {
      if (val.content && val.auditId === 7) {
        results.value.push(JSON.parse(val.content))
      }
    })
  } catch (err: any) {
    message(err.message, 'error')
  }
})
function clear() {
  data.teamMembers = ''
  data.topic = ''
  data.teamName = ''
  data.time = ''
}
async function addAudit() {
  if (data.teamName === '' || data.teamMembers === '' || data.topic === '' || data.time === '') {
    message('请填写完整内容!')
    return
  }
  messageConfirm('确认提交申请吗?').then(
    () => {
      AddAudit(1, data).then(
        () => {
          message('申请成功', 'success')
          changeInfo.value = false
        }
      ).catch(err => message(err.message, 'error'))
    }
  ).catch(() => { return })
}
</script>
<style scoped>
.btn {
  margin-left: 10px;
}
</style>
